Working with images

Images are represented in HTML documents by IMG elements. These elements have no content, just a URL pointing to the image file. The most common image format on the Web is the GIF format; all Web browsers, with the exception of line-mode browsers, can display images in this format inline, in the document window. Other formats are normally displayed by launching external applications. HoTMetaL follows the same approach.

This chapter also gives information on creating clickable image maps.

Inserting images

To insert an image:

• Click on the toolbar button.

(Since the IMG element can't have any content, you won't be able to insert it if the document contains a selection.)

HoTMetaL displays the Edit Image dialog box when you insert the image.

The Image File text entry box in this dialog box is for entering the URL for the image. This information is required. You can type the URL directly into the text entry box if you want, or click on the [ Edit...] button. This will give you a dialog box that is almost identical to the Edit URL dialog box. The only difference is that it doesn't have the `Name/ Query' control group, as this information does not apply to images.

• Enter the URL in the usual way. If you're not familiar with URLs, you should see the URLs chapter.

The Alternate Text text entry box is for entering some text that will be displayed if the document is being read with a line-mode browser, which can't display images. Even though this information is not required, it is good HTML style to include it for the benefit of users without graphical browsers.

The default alignment for images is `bottom', meaning that the bottom of the image will be on the baseline of the adjacent text. Setting the alignment to `middle' or `top' will move the baseline of the text accordingly.

If you intend for this image to be used as a clickable image map turn on the ISMAP check box.

Displaying inline images

If the URL of an IMG element refers to a GIF file on your local system, HoTMetaL will normally display it in place in your document.

You can use the Preferences... command to choose whether such images should be displayed in place or not. This choice will then apply by default to all HoTMetaL documents. You can override the Preferences... setting for individual documents using Show/Hide Inline Images in the View menu. If you don't want images to be displayed in the document, choose Hide Inline Images. The command will then toggle to Show Inline Images: if you choose this command, HoTMetaL will resume displaying inline images.

Displaying images with an external viewer

To launch an external viewer to display a graphic referred to by an IMG element:

• Put the insertion point inside the element.
• Choose the Show Image... command in the View menu.

If you have never chosen a viewer for showing graphics, you will get a file chooser dialog box in which to locate and choose one. Once one or more viewers have been chosen, you'll get a dialog box containing a list of viewers.

• Select a viewer and click on [View] (or just double-click on the viewer). This will launch the viewer, displaying your image.

If you want to add a viewer to the list:

• Click on the [Add...] button.
• Use the file chooser dialog box to navigate to the location of a viewer and select it. This creates a command line that HoTMetaL will run to view the image. If the viewer is in your `path', you can simply enter the program name in the Selection text entry box. You can also type command line options after the command.

To delete a viewer from the list:

• Select it in the list.
• Click on the [Delete] button.

Show Image can be used only for viewing files that are on your local filesystem. Unlike a browser, HoTMetaL does not follow URLs to retrieve files on remote servers.

Using this mechanism, you can display files of any type for which you have a graphics viewer.

Image maps

Image maps (or clickable image maps) are images, usually in GIF format, that have been divided into regions; clicking in a region in a browser causes an action to occur. Usually the action involves the server retrieving a file, which the browser displays.

There are several types of Web server available, and they don't all deal with image maps in exactly the same way. For this reason, the instructions given here may not work for your server. The following discussion is based on the Unix NCSA httpd server; with the exception of the instructions in the section Informing the server, the instructions here should apply to all servers. You should consult your server's documentation or a knowledgeable person if you're unsure whether something applies to your situation.

Creating image map files

An image map file is a file that tells the server what to do when someone clicks in an image map. In this file you put the coordinates of the regions in the image that you want to map, and the URLs that you want the server to access for each region.

Format

Here is a sample of an image map file (the URLs in this example don't refer to real files, so please don't try to use them!):

default http://www.sq.com/heads/missed.html
circle http://www.sq.com/heads/righteye.html 10,25 10,30
rect http://www.sq.com/heads/mouth.html 10,15 20,10
poly http://www.sq.com/heads/nose.html 15,20 20,25 25,20

Notice the following about the sample file:

1. The first line, starting with the word `default', specifies the action that should take place if someone clicks in a part of the image map that isn't mapped to anything. This URL should refer to a file that tells the user to try again.
2. The other lines each specify the type of region that's being mapped, then the URL that's accessed when you click on the region, and lastly the coordinates of the region.
3. You can define three kinds of regions in an image map:
   • a circle: the coordinates of a circle consist of the coordinates of the center point of the circle (in this example `10,25') and the coordinates of any one point on the boundary of the circle (here it's `10,30').
   • a rectangle (rect): the coordinates of a rectangle consist of the coordinates of upper left corner of the rectangle (in this example ` 10,15') and the coordinates of lower right corner of the rectangle (here it's `20,10').
   • a polygon (poly): a polygon is any enclosed figure consisting of straight lines (you can't specify an oval shape, for example, unless you approximate it with straight lines). A polygon may have a regular shape (such as a hexagon) or be completely irregular (for example, the outline of a face). The coordinates of a polygon consist of the coordinates of each vertex (corner) of the polygon.
   All coordinates are measured in pixels. The origin-the point (0,0)-is at the upper left corner of the image. x values (the first number in the coordinate pair) increase as you go to the right, and y values (the second number) increase as you go down.

Creating the file

The most time-consuming part of preparing an image map is figuring out the coordinates of the different regions. There are two kinds of programs you can use to do this:

• The most convenient tool is one that knows about the image map file format. Such a program will let you indicate graphically the regions you want to map, and will generate an image map file for you (probably without the URLs-you'll have to add these yourself).
• A graphics viewer that displays the coordinates (in pixels) when you click on a point in the image. In this case you'll have to record each coordinate pair individually.

If two or more entries in the image map file happen to include the same part of the image, then the first such entry in the image map file is the one that the server uses to determine what action to take.

Informing the server

Once you've created the image map file, you need to tell the server where it is. If you're using the Unix NCSA httpd server, you would do this by making an entry in the file imagemap.conf in the conf directory on the server. (You'll have to find out from a local administrator where the server directory is located.) If you're using a different server, the filenames given in this section may not be correct: you should consult the server documentation or talk to an administrator.

The imagemap.conf file consists of entries that associate a symbolic name with every image map file known to your server. One line describes each map. You can choose whatever symbolic name you wish to use. In this example, the symbolic name is brundlefly, and the image map file is in /home/rodney/public_html/heads.map. You should put the following line in the imagemap.conf file:

brundlefly:		/home/rodney/public_html/heads.map

If someone else is administering the server, you may not be able to update this file yourself. You'll still have to choose a symbolic name for your image map file, because this name is used in the next step.

`Anchoring' the image map file to your image

The final thing you have to do is use HoTMetaL to add the markup (an A element) that associates the image map file with the GIF image that you want to display.

In order to understand what's going on here you have to know that there is a program called imagemap on the server, which reads your image map file whenever someone clicks on the image. The browser sends the program the coordinates of the point that was clicked on. The imagemap program determines which region in the image was clicked on, and on the basis of this, tells the server which URL to access.

You use a URL to associate the image map file with your image. This URL tells the server two things:

• The location (server address and directory) of the program imagemap.
• The symbolic name for your image map file.

A typical location for the imagemap program is the cgi-bin directory on the server. In this case, the URL (in an A element) would look something like this:

http://www.sq.com/cgi-bin/imagemap/brundlefly

(Here `brundlefly' may look like a filename, but it's actually the symbolic name of the image map file).

After you insert the A element, you should do the following:

• Set the URL of the A element to a value such as the one in the example.
• Insert an IMG element inside the A.
• Set the URL of the IMG to point to the location of the GIF image.
• Turn ISMAP on. This tells the server that the image that this element points to is an image map.

Testing your image map

To see if what you did worked:

• Choose Preview... from the File menu.
• In the browser, click in each of the regions you defined to make sure that the `right thing' happens.